<template>
  <div class="feedback">
    <u-nav-bar :title="'驳回'" />
    <div class="feedback__ct">
      <van-form @submit="onSubmit">
        <van-field
          v-model="currentModel.reason"
          :maxlength="200"
          label-width="30"
          type="textarea"
          name="驳回"
          clearable
          placeholder="告诉司机哪里出错了"
          :rules="[{ required: true, message: '驳回理由不能为空' }]"
        ></van-field>
        <div class="positionText">
          <span>{{ currentSize }}</span>
          /
          <span>20字</span>
        </div>
        <div style="margin: 16px">
          <van-button class="commit__btn" round block type="primary" native-type="submit">确定</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, watchEffect } from 'vue'
import { Toast } from 'vant'
import { Form, Field, Button } from 'vant'
import uNavBar from '@/components/NavBar.vue'
import store from '@/store/index'
import { useRoute, useRouter } from 'vue-router'

type Feedback = {
  currentModel: any
  currentSize: number
}
export default defineComponent({
  name: 'Feedback',
  components: {
    'u-nav-bar': uNavBar,
    'van-form': Form,
    'van-field': Field,
    'van-button': Button
  },

  // 只注重主流程的执行，不同业务的函数拆分出去，业务逻辑清晰明了
  setup() {
    const data: Feedback = reactive({
      currentModel: {
        reason: ''
      },
      currentSize: 0
    })

    const router = useRouter()

    const { billId, type } = useRoute().query

    /** 事件专区 */
    const onSubmit = async (): Promise<void> => {
      const params: any = {
        billId: billId,
        type: Number(type),
        reason: data.currentModel.reason
      }
      const result = await store.dispatch('waybill/handleTransportBillRejectReceipt', params)
      if (result) {
        Toast.success('已驳回')
        setTimeout(() => {
          router.go(-1)
        }, 2000)
      }
    }

    watchEffect(() => {
      if (data.currentModel.reason.length >= 20) {
        data.currentModel.reason = data.currentModel.reason.slice(0, 20)
      }
      data.currentSize = data.currentModel.reason.length
    })

    return {
      ...toRefs(data),
      onSubmit
    }
  }
})
</script>
<style lang="scss">
.feedback {
  .van-form {
    position: relative;
  }
  .van-field__control {
    background: #fafbfd;
    min-height: 200px;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 12px;
  }
}
</style>
<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.feedback {
  @include flex-cloumn-width-height-100;
  background-color: $background-color-base;

  &__ct {
    @include flex-scroll-content-pd(24px 12px 0 12px);
    .positionText {
      position: absolute;
      right: 12px;
      bottom: 70px;
      font-size: 14px;
      color: #575c72;
      z-index: 2;
    }
    .van-cell {
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0px 3px 12px 0px rgba(151, 151, 151, 0.12);
      border-radius: 8px;
      padding: 12px 12px 40px 12px;
      margin-bottom: 15px;
      &__value,
      &__right-icon {
        font-size: 14px;
        color: #575c72;
        line-height: 28px;
      }
    }
    .commit__btn {
      background: linear-gradient(125deg, #74cdff 0%, #409eff 100%);
      border-radius: 24px;
      border: none;
    }
  }

  .disabled {
    color: $color-text-secondary;
  }
}
</style>
